<template>
  <div style="display: flex;">
    <div style="width:30%;  border: 1px solid rgb(217, 217, 217);padding:10px">
      <div class="auth-app-title">应用列表({{ app.pagination.total }})</div>
      <a-input-search placeholder="请输入应用名称、应用编码"
                      allow-clear
                      @search="appSearch" />
      <a-menu style="max-height: 500px;"
              :default-selected-keys="['1']"
              :default-open-keys="['sub1']"
              mode="inline"
              @select="appSelect"
              :inline-collapsed="false">
        <a-menu-item v-for="item in app.data"
                     :key="item.id">
          <span>{{ item.name }}</span>
        </a-menu-item>
      </a-menu>
      <a-pagination style="text-align: center;margin-top:10px;"
                    @change="appChangePage"
                    :total="app.pagination.total"
                    v-model="app.pagination.current"
                    show-size-changer
                    :pageSizeOptions="app.pagination.pageSizeOptions"
                    size="small"
                    :page-size="app.pagination.pageSize"
                    @showSizeChange="appSizeChange"
                    show-less-items />
    </div>
    <div style="width:70%;border: 1px solid rgb(217, 217, 217);margin-left:20px">
      <div class="auth-app-title">授权机构</div>
      <a-tree style="overflow-y:auto;height: 500px;"
              ref="unitTree"
              @check="treeCheck"
              :checkStrictly="unit.checkStrictly"
              @expand="treeExpand"
              :loadData="loadData"
              :checkedKeys="unit.checkedKeys"
              :expandedKeys="unit.expandedKeys"
              :autoExpandParent="unit.autoExpandParent"
              checkable
              :showIcon="true"
              :tree-data="unit.treeData">
        <a-icon slot="switcherIcon"
                type="caret-down" />
        <a-icon slot="clazz"
                type="appstore" />
        <a-icon slot="unit"
                type="home" />
        <a-icon slot="dept"
                type="bank" />
        <template #title="item">

          <span >{{ item.treeTitle }}</span>
        </template>
      </a-tree>
      <a-button style="margin: 30px auto 0 auto;display: block;"
                type="primary"
                @click="saveAppUnit"
                class="btn">保存</a-button>
    </div>
  </div>

</template>
<script>
import { page, authApp, queryUnit } from '../../api/application'
import { unitTreeV2 } from '../../api/unit'
import { syncUnitTree } from '../../api/user'

export default {
  data () {
    return {
      app: {
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          pageSizeOptions: ['10', '20', '30', '50']
        },
        params: {
          keyword: ''
        },
        data: []
      },
      selectAppKey: '',
      unit: {
        autoExpandParent: true,
        checkStrictly: true,
        treeData: [],
        expandedKeys: [],
        checkedKeys: {
          checked: [],
          halfChecked: []
        },
        dataList: [],
        searchValue: '',
        count: 0
      }
    }
  },
  created () {
    this.initApp()
    this.initUnitTree()
  },
  mounted () { },
  methods: {
    initApp () {
      this.app.params.currPage = this.app.pagination.current
      this.app.params.pageSize = this.app.pagination.pageSize
      page(this.app.params).then((res) => {
        this.app.data = res.list
        this.app.pagination.total = res.totalCount
      })
    },
    appSearch (value) {
      this.app.params.keyword = value
      this.app.pagination.current = 1
      this.app.pagination.pageSize = 10
      this.initApp()
    },
    appChangePage (current, pageSize) {
      this.app.pagination.current = current
      this.app.pagination.pageSize = pageSize
      this.initApp()
    },
    appSizeChange (current, size) {
      this.app.pagination.current = 1
      this.app.pagination.pageSize = size
      this.initApp()
    },
    appSelect ({ item, key, selectedKeys }) {
      this.unit.checkedKeys.checked = []
      this.unit.checkedKeys.halfChecked = []
      this.unit.autoExpandParent = true
      this.unit.expandedKeys = []
      this.selectAppKey = key
      queryUnit(key).then((res) => {
        if(res && res.length>0){
          // let authUnits = res.authUnits
          // let authParentUnits = res.authParentUnits
          // this.unit.checkedKeys.halfChecked = authParentUnits
          // authUnits.forEach((entity) => {
          //   this.unit.checkedKeys.checked.push(entity.unitId)
          //   this.unit.expandedKeys.push(entity.parentId)
          // })
          // this.unit.count = this.unit.checkedKeys.checked.length
          res.forEach((entity) => {
            this.unit.checkedKeys.checked.push(entity.unitId)
            // this.unit.expandedKeys.push(entity.parentId)
          })
          this.unit.count = this.unit.checkedKeys.checked.length
        }
        
      })
    },
    treeExpand (expandedKeys, info) {
      this.unit.autoExpandParent = false
      this.unit.expandedKeys = expandedKeys
    },
    initUnitTree () {
      syncUnitTree(0).then(res => {
        this.unit.treeData = res
        // res.forEach(item => {
        //   this.unit.treeData.push(item)
        // })
      })
      // unitTreeV2().then((response) => {
      //   this.unit.treeData = response
      // })
    },
    loadData (node) {
      return new Promise((resolve) => {
        syncUnitTree(node.dataRef.id).then(res => {
          node.dataRef.children = res
          this.unit.treeData = [...this.unit.treeData]
          resolve()
          // res.forEach(item => {
          //   node.dataRef.children.push(item)
          // })
        })
      })
    },
    treeCheck (checkedKeys, info) {
      this.unit.checkedKeys = checkedKeys
      this.unit.count = this.unit.checkedKeys.checked.length
    },
    saveAppUnit () {
      if (!this.selectAppKey) {
        this.message.warning('请选择应用')
        return
      }
      authApp({ applicationId: this.selectAppKey, unitIds: this.unit.checkedKeys.checked }).then((res) => {
        this.message.success('保存成功')
      })
    }
  }
}
</script>

<style scoped>
.auth-app-title {
  border-bottom: 1px solid rgb(217, 217, 217);
  margin-bottom: 20px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-weight: 1000;
}
.ant-menu-inline {
  border-right: 0;
}
</style>
